<div>
  <table mat-table #table [dataSource]="reservations">
    <ng-container matColumnDef="{{column.ColumnName}}" *ngFor="let column of columns">
        <th mat-header-cell *matHeaderCellDef> {{column.DisplayName}} </th>
        <td mat-cell *matCellDef="let element">
          <span *ngIf="column.ColumnName === 'ReservationForTime'" [innerHTML]='element[column.ColumnName].replace(",","<br>") | sanitizeHtml'></span>
          <span *ngIf="column.ColumnName === 'ReservationTime'">{{ element[column.ColumnName] | date:'yyyy-MM-dd HH:mm:ss' }}</span>
          <span *ngIf="column.ColumnName != 'ReservationTime' && column.ColumnName != 'ReservationForTime'">{{element[column.ColumnName]}}</span>
        </td>        
    </ng-container>
    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngStyle]="{'background-color': row['ReservationStatus'] == 1? '#dff0d8': row['ReservationStatus']==2?'#f2dede':''}"></tr>
  </table>
  <mat-paginator showFirstLastButtons (page)="onPageEvent($event)" [length]="total" [pageIndex]="pageNumber-1" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>
</div>